<script setup>
import {  watch } from "vue";
import { useRoute } from "vue-router";
const props = defineProps(["content"]);
const route = useRoute();
</script>
<template>
  <div
    :class="props.content.etranceAnimation"
    :style="{
      width:
        route.path == '/works/add' ? '100%' : props.content.style.with + '%',
      height:
        route.path == '/works/add' ? '100%' : props.content.style.height + '%',
      position: route.path != '/works/add' ? 'absolute' : '',
      top: props.content.style.top,
      left: props.content.style.left,
      fontSize: props.content.style.size + 'px',
      color: `rgba(${props.content.style.color})`,
      backgroundColor: `rgba(${props.content.style.sizeBgColor})`,
    }"
  >
    {{ props.content.content }}
  </div>
</template>

<style lang="less" scoped>
div {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
